<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<link href="https://lib.baomitu.com/element-ui/2.10.1/theme-chalk/index.css" rel="stylesheet"/>
<link href="http://lowcode.magicalcoder.com/magicalcoder/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.3/json3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/extension/dataTool.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.10.1/index.js"></script>
<script src="http://www.magicalcoder.com/assets/js/common.js"></script>
<script src="http://lowcode.magicalcoder.com/magicalcoder/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js"></script>
	<script th:src="@{/js/functions.js}"></script>
<style>

</style>

</head>
<body style="">
<div id="magicalDragScene" class="mc-root mc-ui-absolute-pane"><template>
	<div class="mc-ui-absolute-pane" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 350px; background-color: rgb(77, 20, 77);">
		<el-image style="width: 16%; height: 290px; position: absolute; left: 9.07643%; top: 12%;" th:src="${movie.film_pic}"></el-image>
		<span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 28.8217%; top: 12%; font-size: 30px; color: rgb(255, 252, 252);" th:text="${movie.film_name}"></span>
		<span class="mc-ui-geometry-char" style="height: 20px; width: 100px; position: absolute; left: 28.8217%; top: 24.2857%; font-size: 15px; color: rgb(255, 255, 255);">The Sacriffice</span>
		<el-button style="position: absolute; left: 28.8217%; top: 80.5714%; background-color: rgb(239, 23, 23); width: 20%; color: rgb(255, 255, 255); font-size: 18px;" @click="_asd">特惠购票</el-button>
		<small style="position: absolute; left: 28.9809%; top: 51.4286%; color: rgb(255, 255, 255); width: 17%;" th:text="${movie.film_length}">2020-10-23 08：00中国大陆上映</small>
		<small style="position: absolute; left: 28.9809%; top: 43.7143%; color: rgb(255, 255, 255);" th:text="${movie.releasetime}">中国大陆/ 122分钟</small>
		<small style="position: absolute; left: 28.9809%; top: 34.8571%; color: rgb(255, 255, 255);" th:text="${movie.film_type}">战争 剧情 历史</small>
		<small style="position: absolute; left: 55.8917%; top: 75.1429%; color: rgb(255, 255, 255);">累计票房</small>
		<span class="mc-ui-geometry-char" style="height: 20px; width: 100px; position: absolute; left: 55.8917%; top: 60.5714%; color: rgb(255, 215, 0); font-size: 36px;">9.4</span>
		<small style="position: absolute; left: 55.8917%; top: 55.7143%; color: rgb(255, 255, 255); font-weight: bold;">猫眼口碑</small>
		<el-rate style="position: absolute; left: 60.6688%; top: 63.4286%;" v-model="rate" disabled allow-half :max="5" :low-threshold="0" :high-threshold="0"></el-rate>
		<small style="position: absolute; left: 60.6688%; top: 69.7143%; color: rgb(255, 255, 255);">22.9万人评分</small>
		<span class="mc-ui-geometry-char" style="height: 20px; width: 100px; position: absolute; left: 55.414%; top: 81.7143%; color: rgb(255, 255, 255); font-size: 35px;">4.88</span>
		<small style="position: absolute; left: 61.3854%; top: 87.4286%; color: rgb(255, 255, 255); font-size: 13px;">亿</small>
	</div>
	<el-breadcrumb style="position: absolute; left: 0.557325%; top: 72.5714%;" separator="/"></el-breadcrumb>
	<el-breadcrumb style="position: absolute; left: 6.44904%; top: 54.7143%;" separator="/">
		<el-breadcrumb-item>电影</el-breadcrumb-item>
		<el-breadcrumb-item th:text="${movie.film_name}"></el-breadcrumb-item>
	</el-breadcrumb>
	<el-tabs style="position: absolute; left: 6.60828%; top: 60.5714%; width: 59%; font-size: 19px;" v-model="activeName" value="first" @tab-click="_tabClick">
		<el-tab-pane name="first" label="介绍" th:text="${movie.film_Intro}"></el-tab-pane>
		<el-tab-pane name="second" label="演职人员" th:text="${movie.director}"></el-tab-pane>
		<el-tab-pane id="uuidebe7e9e0-b279-4bee-b41e-ea486b369e3b" name="uuidfd50f13b-e4e0-41e2-bb50-b5f4a65549d3" label="购票">
			<table class="table table-bordered">
				<thead>
				<tr>
				<tr>
					<th>电影名</th>
					<th>放映时间</th>
					<th>结束时间</th>
					<th>价格</th>
					<th>操作</th>
				</tr>

				</tr>
				</thead>
				<tbody>
				<tr th:each="u,stat:${movieList}">
					<td th:text="${u.film_name}"></td>
					<td th:text="${u.starttime}"></td>
					<td th:text="${u.endtime}"></td>
					<td th:text="${u.show_price}"></td>
					<td><input type="hidden" name="show_id" th:value="${u.show_id}"></td>
					<td>
						<button class="btn btn-default btn-xs btn-danger btn-primary" th:onclick="goumai([[${u.show_id}]])">购买</button>
					</td>
				</tr>
				</tbody>
			</table>
		</el-tab-pane>
		<el-tab-pane name="third" label="评分">
			<button @click="_pingfen">前往评分</button>
		</el-tab-pane>
	</el-tabs>
	<el-tabs style="position: absolute; left: 74.5247%; top: 59.1429%; width: 23%;" value="first" @tab-click="_tabClick">
		<el-tab-pane name="first" label="预告片"></el-tab-pane>
		<el-tab-pane name="second" label="相关资讯"></el-tab-pane>
	</el-tabs>
</template></div>
<script>
//ajax库采用axios
//调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
var vueData = {rate : 4.5,activeName:"first"};
var vueMethod = {focus : function (e) {try {_t.fastKey.focusElem(e);}catch(e) {}},/*别删我*/
_tabClick : function(){setTimeout(function(){new McECharts().render();},200)},
_asd:function () {
	vueData.activeName="uuidfd50f13b-e4e0-41e2-bb50-b5f4a65549d3";
},
_pingfen:function () {
	var b = window.location.href.substr(window.location.href.indexOf("=")+1)
	window.location='http://localhost:8089/springbootdemo/user/ping?id='+b;
}};
var vueMounted = function(){}
var myMethod = {}
for (var key in myMethod) {
    vueMethod[key] = myMethod[key];
}
var myMounted = null
if(myMounted!==null){vueMounted=myMounted;}
var myData = {}
/*把您定义的数据覆盖布局器自动识别的变量,考虑到兼容性，请下载查看head中重写的assign方法*/
Object.assign(vueData, myData);
var _t = this;
var Ctor = Vue.extend({
    //提前绑定的变量
    data: function() {
        return vueData;
    },
    //页面加载完 会执行方法 可以做一些初始化操作
    mounted: vueMounted,
    /*当前页面绑定的方法集合 与布局器节点一一映射即可 参照element ui文档*/
    methods: vueMethod
});
new Ctor().$mount('#magicalDragScene');
//echarts自动初始化
new McECharts().render();
function goumai(id){
	window.location = getContextPath() + "/user/buy?show_id=" + id;
}
</script>
</body>

</html>